<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Manipulation Befor and After</title>
	<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
	
</head>
<body>
	<div class="box" id="box-content">
	
		<h1>Cambodia</h1>
		<p>Hello Cambodia</p>
		<a href="http://www.google.com" title="Google">Google</a>
		
	</div>
	<script type="text/javascript">
		$(document).ready(function() {
			//$('.box').append('<p> Append Text</p>');
			$('<p> Append To Text</p>').appendTo('.box');
			
			//$('.box').prepend('<p> Prepend Text</p>');
			$('<p> Prepend To Text</p>').prependTo('.box');
			
			//$('.box').height(); return height of .box
			
			//var text = $('h1').html();
			//console.log(text);
			//$('h1').html('Cambodia Kingdom of Wonder....');
			//alert($('div').attr('id'));
		});
	</script>
</body>
</html>